<script setup>
import { onMounted } from 'vue';
import TTSRecorder from '@/utils/TTs2/ttsRecorder.js';
let ttsRecorder
const data = ref("")


const startAsr = () =>{
    console.log(data.value);
    
    ttsRecorder.setParams({
        text:data.value,
    })
    ttsRecorder.start();
}
const stopAsr = () =>{
    ttsRecorder.stop();
}
onMounted(()=>{
    ttsRecorder = new TTSRecorder();
    ttsRecorder.getPlaybackState = (status,newStatus)=>{
        console.log(status,newStatus);
        
    }
})
</script>

<template>
  <div class="containerASR">
    <h1 class="title">语音识别</h1>
    <div class="fun_view">
      <div class="fun">
        <div class="controls">
          <button ref="startAsrRef" @click="startAsr" >语音合成</button>
          <button ref="stopAsrRef" @click="stopAsr" >停止播放</button>
        </div>
      </div>
        <div class="view">
            <textarea class="textarea" v-model="data"></textarea>
        </div>
    </div>
    
    <div class="result">
      <h2 class="text">识别结果：</h2>
      <div class="resultText" ref="">
      
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.containerASR{
    width: 100%;
    height: 100%;
    margin: auto;
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    user-select: none;
    .title{
        color: #333;
    }
    .fun_view{
        height: 120px;
        display: flex;
        .fun{
            flex: 1;
            .controls {
                display: flex;
                justify-content: center;
                margin: 20px 0;
                gap: 10px;
                button {
                    padding: 10px 20px;
                    font-size: 16px;
                    cursor: pointer;
                    background-color: #4CAF50;
                    color: white;
                    border: none;
                    border-radius: 4px;
                    transition: background-color 0.3s;
                    &:hover {
                        background-color: #45a049;
                    }
                    &:disabled {
                        background-color: #cccccc;
                        cursor: not-allowed;
                    }
                }
            }
            .status {
                text-align: center;
                margin: 10px 0;
                font-size: 16px;
                color: #666;
            }
        }
        .view{
            flex: 1;
            width: 100%;
            height: 100%;
            background: #c5c5c5;
            .textarea{
                width: 100%;
                height: 100%;
                border: none;
                outline: none;
                padding: 6px;
                box-sizing: border-box;
                font-size: 16px;
                background: transparent;
                white-space: pre-wrap;
                word-wrap: break-word;
                word-break: break-all;
            }
        }
    }
   
    .result {
        height:  calc(100% - 180px);
        margin-top: 20px;
        padding: 15px;
        background-color: #f9f9f9;
        border-radius: 4px;
        border: 1px solid #ddd;
        flex: 1;
        display: flex;
        flex-direction: column;
        .text{
          margin-bottom: 10px;
        }
        .resultText{
            height: 100%;
            line-height: 1.5;
            padding: 10px;
            user-select: text;
            overflow-y: auto;     
            white-space: pre-wrap;
            word-break: break-word;
            box-sizing: border-box;
            overflow-y: hidden;
            
        }
    }

}
</style>
